<div nz-row [nzGutter]="16">
  <div nz-col [nzMd]="24">
    <form nz-form [formGroup]="validateForm" (ngSubmit)="submit()">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">
          上级菜单
          <nz-tooltip [nzTitle]="'输入搜索'">
            <i nz-tooltip class="anticon anticon-question-circle-o"></i>
          </nz-tooltip>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-select nzAllowClear nzShowSearch formControlName="pid" [nzPlaceHolder]="'请选择'" (nzSearchChange)="searchChange($event)" (ngModelChange)="optionChange($event)">
            <nz-option [nzLabel]="'默认父节点'" [nzValue]="-1"></nz-option>
            <nz-option *ngFor="let option of searchOptions" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">
          图标
          <nz-tooltip [nzTitle]="'参考：https://ng.ant.design/#/components/icon'">
            <i nz-tooltip class="anticon anticon-question-circle-o"></i>
          </nz-tooltip>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-input-group [nzAddOnBefore]="addOnBefore">
            <input nz-input [nzSize]="'large'" formControlName="icon">
            <ng-template #addOnBefore>
              <i class="anticon anticon-{{validateForm.value.icon}}" style="margin: 0 5px;"></i>
            </ng-template>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">菜单名称</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input [nzSize]="'large'" formControlName="name" nz-input>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">菜单描述</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input [nzSize]="'large'" formControlName="mDesc" nz-input>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">链接</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input [nzSize]="'large'" formControlName="url" nz-input>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">
          <span>
            深度
            <nz-tooltip [nzTitle]="'即菜单深度，一级菜单为：1，二级菜单为：2，如此类推。最小为：1'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-input-number [nzSize]="'large'" [nzMin]="1" formControlName="dept"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">
          <span>
            排序
            <nz-tooltip [nzTitle]="'数字越大，位置越靠前'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </span>
        </nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-input-number [nzSize]="'large'" formControlName="sort"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</div>
